<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>用户管理</title>
  </head>
  <body>
    <div class="container">
        <h1>用户管理</h1>
        <button class="btn btn-primary search-btn" type="button" onclick="list();">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
            <span class="search-text">查询</span>
        </button>
        <table class="table">
            <thead>
              <tr>
                <th scope="col">主键</th>
                <th scope="col">姓名</th>
                <th scope="col">操作</th>
              </tr>
            </thead>
            <tbody id="table-body">
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  
    <script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <script id="table-template" type="x-tmpl-mustache">
        {{ #list }}
        <tr>
            <td>{{id}}</td>
            <td>{{name}}</td>
            <td>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#saveDialog" data-bs-title="编辑" data-bs-id="{{id}}" data-bs-name="{{name}}">编辑</button>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deleteDialog" data-bs-title="删除" data-bs-content="确定删除吗？" data-bs-id="{{id}}">
                    删除
                </button>
            </td>
        </tr>
        {{ /list }}
    </script>

    <script>
        const tableTemplate = document.getElementById('table-template').innerHTML
        const tableBody = document.getElementById('table-body')
        const searchBtn = document.querySelector('.search-btn')
        var tableData = [] // 保存表格数据
        // 查询表格数据
        var list = function(){
            $('.search-btn .search-text').hide()
            $('.search-btn [role="status"]').show()
            // 请求后端接口获得数据
            $.ajax({
                url: '/user/list',  // 如果跨域，则需要后端允许跨域访问
                type: 'get',
                // contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')
                dataType: 'json',  // dataType是说明响应结果如何处理
            }).done(function( res ) { // success
                console.log(res)
                if(200 !== res.code){
                    alert( '请求失败：' + res.msg);
                    return
                }
                tableData = res.data
                loadTable()
            }).fail(function( jqXHR, textStatus ) {                
                alert( "Request failed: " + textStatus );
            }).always(function() {
                // remove loading image maybe
                $('.search-btn .search-text').show()
                $('.search-btn [role="status"]').hide()
            })
        }

        var loadTable = function(){
            tableBody.innerHTML = Mustache.render(tableTemplate, {
                list: tableData
            })
        }

        /**
         * https://api.jquery.com/jquery.ajax/
         * $.ajax的返回值现在是一个延迟的promise
            var request = $.ajax({
                url: "script.php",
                method: "POST",
                data: JSON.stringify({ id : menuId }),  // @RequestBody UserAddReq req
                contentType: "application/json; charset=utf-8",
                dataType: "html",
                // success(result,status,xhr)
                // error(xhr,status,error)
                // complete(xhr,status)
            });
            // 首选以下方式。但如果在ajax中需要async: false，则应使用success参数而不是.done。否则你最好使用.done。
            request.done(function( msg ) { // success
                $( "#log" ).html( msg );
            });
            request.fail(function( jqXHR, textStatus ) {
                alert( "Request failed: " + textStatus );
            });
            request.always(function() {
                // remove loading image maybe
            })

        */
    </script>

  </body>
</html>